import React, { Component } from 'react'
import { NavBar, Icon } from 'antd-mobile'
import KImage from '../components/KImage'
import logo from '../assets/images/logo.png'
import '../assets/styles/detail/detail.less'
import { hashHistory } from 'react-router'
import axios from 'axios'

export default class Detail extends Component {
    constructor(props) {
        super(props)
        this.state = {
            id: this.props.routeParams.id,
            content: {}
        }
        // console.log(this.state.id);
    }
    componentDidMount() {
        // 请求数据
        axios.get('/data/detailData.json').then(res => {
            let { data } = res
            this.setState({
                content: data
            })
            // console.log(this.state.content);
        })
    }
    goBack() {
        // 返回 - 路由
        hashHistory.goBack()
    }
    render() {
        return (
            <div className="detail">
                <NavBar
                    mode="light"
                    leftContent={<Icon type="left" />}
                    onLeftClick={this.goBack.bind(this)}
                >
                    <KImage src={logo} />
                </NavBar>
                <div className="articles">
                    <h2>{this.state.content.title}</h2>
                    <ul>
                        <li>作者：{this.state.content.author}</li>
                        <li>{this.state.content.createdTime}</li>
                    </ul>
                    {/* 在react里面渲染从服务器返回的html，这是固定写法 */}
                    <div dangerouslySetInnerHTML={{ __html: this.state.content.content }} />;
                </div>
            </div>
        )
    }
}
